<script setup  lang="ts">
import listsItem from './lists-item.vue';
import { onMounted, ref } from 'vue';
let item_w = ref(0);
// 封装自适应组件
// 修改count 可以动态更改行数
let count = 4;  // 呈现列数
let max_base_h = 300; //基准高度，内容可以小于最大高度但是 不能 高于，类似于小红书那种
let lists = [
  {
    name: 'x1x',
    height: 200,
    cy: 0,
    with: 200
  },
  {
    name: '2xx',
    height: 300,
    cy: 0,
    with: 200
  }, {
    name: 'x3x',
    height: 200,
    cy: 0,
    with: 200
  }, {
    name: 'x4x',
    height: 300,
    cy: 0,
    with: 200
  }
  , {
    name: 'x5x',
    height: 300,
    cy: 0,
    with: 200
  }
  , {
    name: 'x6x',
    height: 300,
    cy: 0,
    with: 200
  }
  , {
    name: 'x7x',
    height: 300,
    cy: 0,
    with: 200
  }
  , {
    name: 'x8x',
    height: 300,
    cy: 0,
    with: 200
  }
  , {
    name: 'x9x',
    height: 100,
    cy: 0,
    with: 200
  }
  , {
    name: 'x10x',
    height: 300,
    cy: 0,
    with: 200
  }
  , {
    name: 'x11x',
    height: 300,
    cy: 0,
    with: 200
  }
  , {
    name: 'x8x',
    height: 300,
    cy: 0,
    with: 200
  }
  , {
    name: 'x9aasdx',
    height: 100,
    cy: 0,
    with: 200
  }
  , {
    name: 'x10x',
    height: 300,
    cy: 0,
    with: 200
  }
  , {
    name: 'x11x',
    height: 300,
    cy: 0,
    with: 200
  }, {
    name: 'x8x',
    height: 300,
    cy: 0,
    with: 200
  }
  , {
    name: 'x9aasdx',
    height: 100,
    cy: 0,
    with: 200
  }
  , {
    name: 'x10x',
    height: 300,
    cy: 0,
    with: 200
  }
  , {
    name: 'x11x',
    height: 300,
    cy: 0,
    with: 200
  }, {
    name: 'x10x',
    height: 300,
    cy: 0,
    with: 200
  }
  , {
    name: 'x11x',
    height: 300,
    cy: 0,
    with: 200
  }
]
const contents = ref(null);

const ls = ref([])
const filterdata = () => {
  lists.forEach((item, index) => {
    let t_index = index + 1;
    if ((t_index) > count) {

      lists[index] = {
        ...item,
        //  计算当前所在的行*300-当列有效高度=空白高度
        cy: (parseInt(index / count) * max_base_h) - (lists[t_index - (count + 1)].hc),
        //  上一列对应的高度叫上当前元素的高度
        hc: lists[t_index - (count + 1)].hc + item.height
      }
    } else {
      lists[index] = {
        ...item,
        cy: 0,
        hc: item.height
      }
    }
  })
  ls.value = [...lists];
}
onMounted(() => {
  item_w.value = parseInt(contents.value.clientWidth / count);
  filterdata();
  window.addEventListener('resize', () => {
    console.log(contents.value.clientWidth)
    let warp_w = contents.value.clientWidth;
    if (warp_w <= 390) {
      count = 2
    } else if (warp_w > 390 && warp_w < 688) {
      count = 3;
    } else if (warp_w >= 688 && warp_w < 765) {
      count = 4;
    } else if (warp_w >= 765) {
      count = 5
    }
    item_w.value = parseInt(contents.value.clientWidth / count);
    filterdata();
  })
})



</script> 
<template>
  <div class="containers" ref="contents">
    <listsItem 
    v-for="(item, index) in ls"
    :key="index"
    :indexs="index"
    :styles="{
      height: item.height + 'px',
      width: item_w + 'px',
      transform: `translate(0,-${item.cy}px)`
    }">
      <div class="cell">
        asdasdasdas-{{index}}
      </div>
    </listsItem>

  </div>
</template> 
<style>
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.warps {
  width: 100%;
}

.containers {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  /* background-color: ; */
  box-sizing: border-box;
  overflow-y: scroll;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #ccc;
}
</style>
